<template>
  <view class="home" v-if="tabbarIndex == 1">
    <!-- 顶部背景 -->
    <view class="top">
    </view>
    <!-- 搜索 -->
    <!-- #ifdef MP -->
    <view style="display: flex;">
      <view class="topmap">
        <view class="map">
          <image @click="getMapLocation" src="@/static/home/map.png" mode=""></image>
        </view>
        <view class="title">
          {{address ? address : "请授权获取定位"}}
        </view>
      </view>
    </view>
    <!-- #endif -->
    <!-- 1.0版本暂时不要搜索 -->
    <!-- <view style="display: flex; justify-content: center;">
      <view class="seach">
        <view class="reightimput">
          <view class="input">
            <image @click="searchClean" style="width: 40rpx;height: 40rpx;margin-right: 10rpx; margin-top: 10rpx;"
              src="@/static/home/del.png">
            </image>
            <input type="text" v-model="params.shopName" placeholder="输入关键字" placeholder-style="font-size: 12px; " />
          </view>
          <view class="iconseach" @click="getIndexData()">
            <uni-icons type="search" size="21" color="#ABABAB"></uni-icons>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 轮播图 -->
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
        :duration="duration" indicator-active-color="#ffffff">
        <swiper-item v-for="item in bannerList">
          <image style="width: 100%; height: 100%;" :src="getImgUrl(item.mszs_banner)">
          </image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 未充值 -->
    <view v-if="integral == '0' || integral == '1'">
      <view class="Underrecharge">
        <scroll-view style="height:100%" scroll-y="true" class="scroll-Y">
          <view class="features">
            软件特色
          </view>
          <view class="aiimgList">
            <view class="aiimgitem">
              <image src="../../../../static/photograph/aiimg1.png" mode=""></image>
            </view>
            <view class="aiimgitem">
              <image src="../../../../static/photograph/aiimg2.png" mode=""></image>
            </view>
            <view class="aiimgitem">
              <image src="../../../../static/photograph/aiimg3.png" mode=""></image>
            </view>
          </view>
          <view class="txt">
            我型我发软件是一种利用人工智能技术实现头发替换的工具。它可以帮助用户在照片或视频中更改人物的头发颜色、发型、长度等，从而实现虚拟美发效果。
            模型。用户只需上传自己的照片或视频，选择想要的头发样式和颜色，软件就会自动将其应用到目标人物上，生成逼真的换发效果。
          </view>
        </scroll-view>
      </view>
      <!-- 免费试用 -->
      <view class="Tryout" @click="goPhoto">
        <view class="trialbtn">
          点击免费试用
        </view>
      </view>
    </view>
    <!-- 内容 -->
    <view class="Wigshop" v-else>
      <scroll-view style="height:100%" scroll-y="true" class="scroll-Y">
        <block v-if="shopcontentList.length == 0">
          <tn-empty mode="data" size="sm" />
        </block>
        <view class="c-item" v-for="(item,index) in shopcontentList" :key="index" @click="detail(item.id)">
          <view class="c-item-left">
            <view class="c-item-image-div">
              <image :src="getImgUrl(item.shopLog)" mode="aspectFit"></image>
            </view>
          </view>
          <view class="c-item-right">
            <view class="c-item-right-top">
              <view style="width: 56%;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;">
                店名: {{item.shopName}}
              </view>
              <view class="c-item-right-score">
                评分:
                <view class="stars">
                  <uni-section type="line" padding>
                    <uni-rate v-model="rateValue" @change="onChange" size="16" />
                  </uni-section>
                </view>
              </view>
            </view>
            <view class="c-item-addr">地址:{{item.address}}</view>
            <view class="c-item-pho">电话:{{item.phone}}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  // 引入SDK核心类
  import QQMapWX from '@/libs/qqmap-wx-jssdk.js';
  const qqmapsdk = ref('')
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'
  import {
    onShow,
    onLoad
  } from "@dcloudio/uni-app"
  import {
    getList
  } from '@/api/index.js'
  import getImgUrl from '@/config/img.js'
  import {
    getUserInfo
  } from '@/api/my.js'

  const location = ref('')
  //轮播图
  const indicatorDots = ref(true)
  const autoplay = ref(true)
  const interval = ref(2000)
  const duration = ref(500) //滑动动画时长
  const tabbarIndex = ref(1)
  const params = ref({
    limit: 20,
    page: 1,
    shopName: '' // 店铺名称
  })
  // 内容
  const shopcontentList = ref({})
  //评分小星星
  const rateValue = ref(3)
  const bannerList = ref([])
  // 积分
  const integral = ref('0')

  const address = ref('')
  const scrollH = ref(0)
  const scrollinto = ref('')
  const cesLongitude = ref('')

  const onChange = (e) => {
    console.log('rate发生改变:' + JSON.stringify(e))
  }

  // 获取列表信息
  const getIndexData = () => {
    getList(params.value).then(res => {
      bannerList.value = res.data.banners
      shopcontentList.value = res.data.response
    })
  }

  // 搜索清空
  const searchClean = () => {
    params.value.shopName = ''
    getIndexData()
  }

  // 详情
  const detail = (id) => {
    uni.navigateTo({
      url: `/pages/indexDetail/indexDetail?id=` + id
    })
  }

  //获取用户位置
  onLoad(() => {
    // 地图定位
    // #ifdef MP
    let token = uni.getStorageSync("token")
    if (token) {
      let address = uni.getStorageSync('address');
      if (address !== undefined && address !== null && address !== '') {
        address.value = address
      } else {
        getMapLocation()
      }
    }
    // #endif
  })

  // 获取用户信息
  const getUserData = () => {
    getUserInfo().then(res => {
      integral.value = res.data.integral
    })
  }

  // 点击免费试用
  let emit = defineEmits(['eidttab'])
  const goPhoto = () => {
    emit('eidttab', 2)
  }

  // 获取当前用户所在街道位置
  const getMapLocation = () => {
    
    // 实例化API核心类
    qqmapsdk.value = new QQMapWX({
      key: '2QTBZ-RRZOI-WZMGT-5E3DT-5PF3S-VOFQB'
    });
    qqmapsdk.value.reverseGeocoder({
      location: '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
      success: function(res) { //成功后的回调
        address.value = res.result.address
        uni.setStorageSync('address', address.value)
      },
      fail: function(error) {
        if (error.status == 1000) {
          // #ifdef MP
          //调起客户端小程序设置界面，返回用户设置的操作结果
          uni.getSetting({
            success: (res22) => {
              console.log("获取位置", res22)
              if (res22.authSetting["scope.userLocation"] == false) {
                wx.showModal({
                  title: "请授权您的地理位置",
                  content: '需要您的地理位置',
                  success: function(res333) {
                    console.log(res333.cancel, '点了取消')
                    if (res333.cancel) {
                      return false
                    }
                    wx.openSetting({
                      success(res) {
                        if (res.authSetting[
                            "scope.userLocation"
                          ] == true) {
                          wx.showToast({
                            title: '授权成功',
                            icon: 'success',
                            duration: 1000
                          })
                        } else {
                          wx.showToast({
                            title: '授权失败',
                            icon: 'none',
                            duration: 1000
                          })
                        }
                      },
                      fail: function(res) {
                        console.log("调起失败")
                      }
                    })
                  },
                  fail: function(res) {
                    console.log(res.cancel)
                  }
                })
              }
            }
          })
          // #endif
        }
      },
      complete: function(res) {
        console.log(res);
      }
    })
  }

  onMounted(() => {
    // 获取列表信息
    getIndexData()

    // 获取用户信息
    getUserData()

    // #ifdef MP
    // 先获取缓存里面的地址，没有再去调用方法获取地址，（地址获取有延迟）
    let newAddress = uni.getStorageSync('address');
    if (newAddress !== undefined && newAddress !== null && newAddress !== '') {
      address.value = newAddress
    } else {
      getMapLocation()
    }
    // #endif
  })
</script>

<style lang="scss" scoped>
  .c-item {
    display: flex;
    height: 150rpx;
    margin: 15rpx;
  }

  .c-item-left {
    width: 20%;
    background-color: #fff;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
  }

  .c-item-right {
    width: 80%;
    background-color: #fff;
    box-shadow: 1rpx 1rpx 1rpx 1rpx #efefef;
    border-radius: 20rpx;
    margin-left: 10rpx;
    font-size: 25rpx;
  }

  .c-item-right-top {
    display: flex;
    justify-content: space-between;
    margin-left: 20rpx;
    margin-top: 12rpx;
  }

  .c-item-right-score {
    display: flex;
  }

  .c-item-image-div {
    width: 120rpx;
    height: 130rpx;
    margin: 0 auto;
    margin-top: 10rpx;
    border-radius: 20rpx;
    box-shadow: 1rpx 1rpx 1rpx 1rpx #efefef;
  }

  /* #ifdef H5 */
  .c-item-image-div {

    image {
      width: 100%;
      height: 100%;
    }
  }

  /*#endif*/

  .c-item-addr {
    opacity: 0.6;
    margin-left: 20rpx;
    margin-top: 10rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .c-item-pho {
    opacity: 0.6;
    margin-left: 20rpx;
    margin-top: 10rpx;
  }

  .home {
    .top {
      height: 145rpx;
      width: 100vw;
      background: linear-gradient(#AEFCEF, #fff);
    }

    .topmap {
      display: flex;
      align-items: center;
      margin-left: 12rpx;
      // margin-right: 280rpx;

      .map {
        height: 36rpx;
        width: 36rpx;
        margin-bottom: 6rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        font-size: 22rpx;
      }
    }

    .seach {
      margin: 0 auto;
      display: flex;
      align-items: center;

      .reightimput {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 710rpx;
        height: 65rpx;
        border: 2rpx solid #E4E4E4;
        border-radius: 10rpx;

        .input {
          display: flex;
          margin-left: 10rpx;

          input {
            height: 60rpx;
            width: 510rpx;
          }
        }

        .del {
          width: 32rpx;
          height: 32rpx;
          margin-bottom: 4rpx;
          margin-left: 15rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    //轮播图
    .uni-margin-wrap {
      width: 690rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      border-radius: 30rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
    }

    .swiper {
      height: 325rpx;
      width: 725rpx;
      border-radius: 30rpx;
      margin-top: 20rpx;
      overflow: hidden;
    }

    //body
    .Wigshop {
      height: 950rpx;
      background-color: #FAFAFA;
      border-radius: 20rpx;
      margin: 0 20rpx;
      border: 3rpx solid #CCCCCC;
      display: flex;
      overflow: hidden;

      .left {
        width: 150rpx;
        height: 100%;
        background-color: #fff;
        border-radius: 30rpx 0 0 30rpx;
        border-right: 3rpx solid #CCCCCC;

        .shopimgitem {
          width: 120rpx;
          height: 113rpx;
          // margin: 14rpx;
          padding-bottom: 8rpx;
          border-bottom: 2rpx solid #BEBEBE;

          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
          }
        }
      }

      .right {
        .shopcontentitem {
          box-sizing: border-box;
          background-color: #fff;
          // width: 560rpx;
          height: 125rpx;
          margin-top: 10rpx;
          margin-left: 5rpx;
          border-radius: 15rpx;
          box-shadow: 1rpx 1rpx 1rpx #F2F2F2;
          border-left: 2rpx solid #F2F2F2;
          border-top: 2rpx solid #F2F2F2;
          padding: 6rpx 12rpx;
          display: flex;

          .shopname {
            display: flex;
            // width: 264rpx;
            margin-left: 8rpx;
            width: 100%;

            .title {
              font-size: 24rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 36rpx;
            }

            .Address {
              font-size: 22rpx;
              color: #909090;
              line-height: 34rpx;
              height: auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .scoring {
            margin-left: 14rpx;
            display: flex;
            margin-top: 10rpx;

            .title {
              font-size: 22rpx;
              // font-weight: 560;
            }

            .stars {
              margin-left: 15rpx;
            }
          }

        }
      }

    }

    .Underrecharge {
      height: 500rpx;
      background-color: #FAFAFA;
      border-radius: 20rpx;
      margin: 0 20rpx;
      border: 3rpx solid #CCCCCC;
      overflow: hidden;

      .features {
        width: 160rpx;
        height: 50rpx;
        background-color: #FEA38F;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 0 0 50rpx 0;
      }

      .aiimgList {
        display: flex;
        justify-content: space-between;
        padding: 40rpx;

        .aiimgitem {
          width: 175rpx;
          height: 175rpx;

          /* #ifdef H5 */
          image {
            width: 100%;
            height: 100%;
          }

          /*#endif*/
        }

      }



      .txt {
        padding: 0 15rpx;
        color: #BA1919;
        font-size: 25rpx;
        font-weight: 600;
        line-height: 45rpx;
        text-indent: 30rpx;
      }
    }

    .Tryout {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      // margin-top: 3%;

      .trialbtn {
        width: 360rpx;
        height: 60rpx;
        background-color: #93FFE8;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    }

  }

  @media all and (min-height:500px) and (max-height:800px) {
    .Tryout {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 3%;
    }
  }

  @media all and (min-height:801px) and (max-height:1100px) {
    .Tryout {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20%;
    }
  }
</style>